<template>
	<view>
		<nav-bar color="#000000" bgc="#ffffff" bbtn>反馈体验</nav-bar>
		<view class="section-1">
			<view class="title">评分</view>
			<view class="img">
				<image :src="showStar(1)" mode="" @click="showImage(1)"></image>
				<image :src="showStar(2)" mode="" @click="showImage(2)"></image>
				<image :src="showStar(3)" mode="" @click="showImage(3)"></image>
				<image :src="showStar(4)" mode="" @click="showImage(4)"></image>
				<image :src="showStar(5)" mode="" @click="showImage(5)"></image>
			</view>
		</view>
		<separator></separator>
		<view class="section-2">
			<view class="title">您可以在此写下你本次消费的体验，以便我们管理提升 商家的品质，为您提供更好的服务</view>
			<view class="textarea">
				<view class="inuptNum">{{ inuptNum.length }}/500</view>
				<textarea maxlength="500" placeholder="请输入" v-model="inuptNum"></textarea>
			</view>
		</view>
		<view class="section-3" @click="submit">提交</view>
	</view>
</template>
<script>
import separator from '../../components/separator.vue';
export default {
	components: {
		separator
	},
	data() {
		return {
			inuptNum: '',
			chars: 0,
			starFlag:0,
			id: 0
		};
	},
	methods: {
		showImage: function(index) {
			this.starFlag = index
		},
		showStar:function(index){
			if(index<=this.starFlag){
				return "../../static/image/order/icon_manxing@3x.png"
			}else{
				return "../../static/image/order/icon_kongxing@3x.png"
			}
		},
		submit(){
			if (!this.starFlag) {
				uni.showToast({
					title: '请选择评分',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
			if (!this.inuptNum) {
				uni.showToast({
					title: '请填写评价',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
			let params = {
				id: this.id,
				evaluate: this.inuptNum,
				num: this.starFlag
			};
			this.ajaxJson('evaluateOrder', params, res => {
				uni.showToast({
					title: '提交成功',
					icon: 'none',
					duration: 2000,
					success() {
						uni.navigateBack({})
					}
				});
			});
		}
	},
	onLoad(options) {
		this.id = options.id
	}
};
</script>

<style lang="scss" scoped>
* {
	padding: 0;
	margin: 0;
	font-size: 0.75rem;
	box-sizing: border-box;
}
page {
	background: #ffffff;
}
.section-1 {
	margin-top: 80rpx;
	padding: 20rpx;
	.title {
		font-size: 32rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.img {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
		image {
			width: 40rpx;
			height: 40rpx;
			margin: 0 10rpx;
		}
	}
}
.section-2 {
	margin-top: 20rpx;
	padding: 20rpx;
	width: 100%;
	.title {
		width: 95%;
		margin: 0 auto;
		margin-bottom: 20rpx;
	}
	.textarea {
		background-color: #fff7f4;
		border-radius: 20rpx;
		position: relative;
		padding: 20rpx;
		width: 95%;
		height: 500rpx;
		margin: 0 auto;
		.inuptNum {
			position: absolute;
			bottom: 10rpx;
			right: 10rpx;
		}
		textarea {
			width: 100%;
			height: 100%;
		}
	}
}
.section-3 {
	width: 80%;
	margin: 50rpx auto;
	height: 100rpx;
	border-radius: 50rpx;
	color: #ffffff;
	text-align: center;
	line-height: 100rpx;
	font-size: 34rpx;
	background: linear-gradient(to right, #fd6431, #ff9972);
}
.tips {
	width: 100%;
	margin-top: 50rpx;
	text-align: center;
	color: #aaaaaa;
}
</style>
